<!--
 * @Descripttion: 
 * @version: 
 * @Author: sueRimn
 * @Date: 2020-11-20 17:56:02
 * @LastEditors: sueRimn
 * @LastEditTime: 2020-11-23 17:20:44
-->
<template>
    <div class="main-content-right">
        <div v-show="!isDetails">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane
                    :label="'视频（' + userInfo.video_num + ')'"
                    name="video"
                >
                    <div class="listBox">
                        <div
                            class="itemBox"
                            v-for="(item, index) in videoListData"
                            :key="item.video_id"
                            @click="toVideoDetails(item)"
                        >
                            <div
                                v-if="!isOther"
                                class="iconDelete"
                                @click.stop="delVideo(item, index)"
                            >
                                <i class="el-icon-delete"></i>
                            </div>
                            <div class="imgIfarm">
                                <el-image
                                    :src="item.img_url"
                                    style="width:100%"
                                    fit="cover"
                                ></el-image>
                            </div>
                            <div class="content">
                                <div class="title ShengLue">
                                    {{ item.title }}
                                </div>
                                <div class="subtitle ShengLue">
                                    {{
                                        item.province_name +
                                            item.city_name +
                                            item.area_name
                                    }}
                                </div>
                                <div class="bottomText">
                                    {{
                                        item.likenum > 10000
                                            ? item.likenum / 10000 + "W"
                                            : item.likenum
                                    }}
                                    喜欢
                                </div>
                            </div>
                        </div>
                    </div>
                    <div v-if="videoListData.length == 0" class="noMore">
                        -- 暂无数据 --
                    </div>
                    <!-- //分页 -->
                    <div class="bottomPagination">
                        <el-pagination
                            :current-page="currentPage2"
                            :page-sizes="[12, 32, 52]"
                            :page-size="pageSize2"
                            layout=" sizes, prev, pager, next,total, jumper"
                            :total="total2"
                            @current-change="handleCurrentChange2"
                            @size-change="handleSizeChange2"
                        />
                    </div>
                </el-tab-pane>
                <el-tab-pane
                    :label="'文章（' + userInfo.news_num + ')'"
                    name="article"
                >
                    <div class="airleBox">
                        <div
                            class="a_itemBox"
                            v-for="(item, index) in articleListData"
                            :key="item.article_id"
                            @click="toArticleDeta(item.article_id)"
                        >
                            <div
                                v-if="!isOther"
                                class="iconDelete"
                                @click.stop="delArticle(item, index)"
                            >
                                <i class="el-icon-delete"></i>
                            </div>
                            <div class="first_row">
                                <el-avatar
                                    size="small"
                                    :src="item.avatar"
                                ></el-avatar>
                                <div class="first_name ShengLue">
                                    {{ item.nicheng }}
                                </div>
                            </div>
                            <div class="second_row ShengLue">
                                {{ item.title }}
                            </div>
                            <div
                                class="three_row ShengLue"
                                v-html="HTMLDecode(item.content)"
                            ></div>
                            <div class="four_row">
                                <div>
                                    <el-tag size="mini">{{
                                        item.article_name
                                    }}</el-tag>
                                    <span class="textspan">{{
                                        item.creat_time | getTime
                                    }}</span>
                                </div>
                                <div>
                                    <span class="textspan"
                                        >{{
                                            item.likenum > 10000
                                                ? item.likenum / 10000 + "W"
                                                : item.likenum
                                        }}
                                        喜欢</span
                                    >
                                    <span class="textspan"
                                        >{{ item.commentnum }} 评论</span
                                    >
                                </div>
                            </div>
                        </div>
                    </div>
                    <div v-if="articleListData.length == 0" class="noMore">
                        -- 暂无数据 --
                    </div>
                    <!-- //分页 -->
                    <div class="bottomPagination">
                        <el-pagination
                            :current-page="currentPage"
                            :page-sizes="[10, 30, 50]"
                            :page-size="pageSize"
                            layout=" sizes, prev, pager, next,total, jumper"
                            :total="total"
                            @current-change="handleCurrentChange"
                            @size-change="handleSizeChange"
                        />
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
        <div v-if="isDetails">
            <component
                :is="componentName"
                :ArticleID="ArticleID"
                :VideoItem="VideoItem"
                @delBack="delBack"
            ></component>
        </div>
    </div>
</template>

<script>
import {
    getArticleList,
    getVideoList,
    todelArticle,
    todelVideo,
    getVideoListByForm,
    saveAddbrowse
} from "@/api/personalHomepage/index";
import { getFormatTime } from "@/utils/timeUtils";
import Article from "./articleDetails";
import VideoDetails from "./videoDetails";
export default {
    props: ["userInfo", "isOther"],
    components: {
        Article,
        VideoDetails
    },
    data() {
        return {
            activeName: "video",
            //文章
            currentPage: 1, // 页数
            total: 0, // 总数
            pageSize: 10, // 每页条数
            articleListData: [],
            //视频
            currentPage2: 1, // 页数
            total2: 0, // 总数
            pageSize2: 12, // 每页条数
            videoListData: [],
            isDetails: false, //详情
            componentName: "Article", //详情状态
            ArticleID: "", //查看文章ID
            VideoItem: {} //查看视频详情
        };
    },
    filters: {
        //时间格式
        getTime(val) {
            if (val != "") {
                return getFormatTime(val * 1000, false);
            }
        }
    },
    methods: {
        //切换列表
        handleClick() {
            this.page = 1;
            this.page2 = 1;
            if (this.activeName == "video") {
                this.getVideo();
            } else {
                this.getArticle();
            }
        },
        //文章
        async getArticle() {
            var query;
            if (this.isOther) {
                query = {
                    page: this.currentPage,
                    pagesize: this.pageSize,
                    users_type: 1,
                    user_id: this.$route.query.user_id,
                    is_check: 2
                };
            } else {
                query = {
                    page: this.currentPage,
                    pagesize: this.pageSize,
                    users_type: 1,
                    is_user: 1
                };
            }
            var list = await getArticleList(query);
            if (list.code == 200) {
                this.total = list.data.total;
                this.articleListData = list.data.data;
            } else {
                this.total = 0;
                this.articleListData = [];
            }
        },
        //删除文章：
        delArticle(item, index) {
            this.$confirm("此操作将删除该文章, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(async () => {
                    var query = {
                        article_id: item.article_id
                    };
                    var list = await todelArticle(query);
                    if (list.code == 200) {
                        this.articleListData.splice(index, 1);
                        this.$message({
                            type: "success",
                            customClass: "customClass",
                            message: "删除成功!"
                        });
                    }
                })
                .catch(() => {});
        },
        handleCurrentChange(val) {
            this.currentPage = val;
            this.getArticle();
        },
        handleSizeChange(val) {
            this.currentPage = 1;
            this.pageSize = val;
            this.getArticle();
        },
        //视频
        async getVideo() {
            var query = {
                page: this.currentPage2,
                pagesize: this.pageSize2
            };
            var list;
            if (this.isOther) {
                query.form_id = this.$route.query.user_id;
                list = await getVideoListByForm(query);
            } else {
                list = await getVideoList(query);
            }
            if (list.code == 200) {
                this.total2 = list.data.total;
                this.videoListData = list.data.data;
            } else {
                this.total2 = 0;
                this.videoListData = [];
            }
        },
        //删除视频：
        async delVideo(item, index) {
            this.$confirm("此操作将删除该视频, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(async () => {
                    var query = {
                        video_id: item.video_id
                    };
                    var list = await todelVideo(query);
                    if (list.code == 200) {
                        this.videoListData.splice(index, 1);
                        this.$message({
                            type: "success",
                            customClass: "customClass",
                            message: "删除成功!"
                        });
                    }
                })
                .catch(() => {});
        },
        //添加阅读
        async Addbrowse(query) {
            var list = await saveAddbrowse(query);
            console.log("添加阅读：", list);
        },
        //跳转文章详情
        toArticleDeta(id) {
            var query = {
                article_id: id
            };
            this.Addbrowse(query);
            this.isDetails = true;
            this.componentName = "Article";
            this.ArticleID = id;
        },
        //跳转视频详情
        toVideoDetails(item) {
            this.VideoItem = item;
            this.isDetails = true;
            this.componentName = "VideoDetails";
        },
        //文章返回
        delBack() {
            this.isDetails = false;
        },
        handleCurrentChange2(val) {
            this.currentPage2 = val;
            this.getVideo();
        },
        handleSizeChange2(val) {
            this.currentPage2 = 1;
            this.pageSize2 = val;
            this.getVideo();
        },
        HTMLDecode(text) {
            var temp = document.createElement("div");
            temp.innerHTML = text;
            var output = temp.innerText || temp.textContent;
            temp = null;
            return output;
        }
    }
};
</script>

<style scoped lang="scss">
.main-content-right {
    width: 98%;
    margin-left: 2%;
    min-height: 764px;
    min-width: 860px;
    padding: 24px;
    background: #fff;
    box-sizing: border-box;
}

.listBox {
    width: 100%;
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;

    .itemBox {
        width: 31%;
        height: 300px;
        background: #fff;
        border: 1px solid #e9e9e9;
        border-radius: 2px;
        margin: 0 1%;
        margin-bottom: 24px;
        overflow: hidden;
        position: relative;

        cursor: pointer;
        &:hover {
            box-shadow: 5px 5px 5px #eee;
        }

        .imgIfarm {
            width: 100%;
            height: 187px;
            overflow: hidden;
            border: 1px solid #e9e9e9;
            background: radial-gradient(circle, #ebeff2 0%, #e6ebf0 100%);
            border-radius: 2px 2px 0px 0px;
        }

        .content {
            width: 100%;
            height: 100%;
            padding: 12px 24px;
            box-sizing: border-box;

            .title {
                font-size: 16px;
                font-weight: 600;
                line-height: 25px;
                color: rgb(66, 65, 65);
            }

            .subtitle {
                font-size: 15px;
                line-height: 23px;
                color: rgba(0, 0, 0, 0.45);
                margin-top: 5px;
            }

            .bottomText {
                font-size: 13px;
                font-weight: 600;
                font-family: Helvetica;
                line-height: 21px;
                color: rgba(0, 0, 0, 0.45);
                margin-top: 8px;
                display: flex;
                flex-direction: row-reverse;
            }
        }
    }
}

.airleBox {
    width: 100%;
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .a_itemBox {
        width: 48%;
        background: #fff;
        border: 1px solid #e9e9e9;
        border-radius: 8px;
        margin-bottom: 24px;
        overflow: hidden;
        padding: 12px 24px;
        box-sizing: border-box;
        position: relative;

        cursor: pointer;
        &:hover {
            box-shadow: 5px 5px 5px #eee;
        }

        .first_row {
            display: flex;
            align-items: center;

            .first_name {
                margin-left: 10px;
            }
        }

        .second_row {
            margin-top: 7px;
            font-size: 15px;
        }

        .three_row {
            margin-top: 5px;
            font-size: 13px;
            color: #a09e9e;
        }

        .four_row {
            display: flex;
            justify-content: space-between;
            margin-top: 8px;
            font-size: 13px;
            color: #a09e9e;

            .textspan {
                margin-left: 8px;
            }
        }
    }
}

//省略文本
.ShengLue {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #6d7785;
}

.bottomPagination {
    padding: 15px 0;
}

.iconDelete {
    position: absolute;
    top: 0px;
    right: 0px;
    font-size: 18px;
    color: #fff;
    width: 30px;
    height: 30px;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.noMore {
    width: 100%;
    text-align: center;
    font-size: 14px;
    color: #6d7785;
    margin: 100px 0;
}
</style>
